<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    button{
        background-color: skyblue;
        border-radius: 5px;
        cursor: pointer;
        margin-left: 10px;
        padding: 5px 10px;
        border: none;
    }
    .bigBox{
        width: 500px;
        display: flex;
        align-items: flex-start;
    }
    textarea{
        transition: all 0.7s;
        height: 50px;
        width: 300px;
        resize: none;
    }
    textarea:focus{
        height: 100px;
        outline: 1px solid skyblue;
    }

    img{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        margin-right: 10px;
    }

    span{
        margin-left: 65px;
        opacity: 0;
        transition: all 0.7s;
        color: #666;
    }
    .comment{
        margin-top: 20px;
        margin-left: 65px;
    }
    .comment-item{
        margin-bottom: 15px;
        padding: 10px;
        background-color: #f5f5f5;
        border-radius: 6px;
    }
</style>
<body>
    <div class="bigBox">
    <img src="C:\Users\zhh2\OneDrive\图片\Image_1707400293885_waifu2x_photo_noise3.png" alt="">
    <textarea name="" id="" placeholder="发一条友善的评论见证当下"></textarea>
    <button id="fabuBtn">发布</button>
    </div>
    <span>0/200字</span>
    <div class="comment"></div>


    <script>
        const comments =document.querySelector('.comment')
        const fabuBtn = document.querySelector('#fabuBtn')
        const tx =document.querySelector('textarea')
        const span = document.querySelector('span')

        tx.addEventListener('input',function(){
            span.innerHTML = `${tx.value.length}/200字`
            if (tx.value.length > 200){
                tx.disabled = true
            }
            else {
                tx.disabled = false
            }
        })

        tx.addEventListener('focus',function(){
            span.style.opacity = 1
        })

        tx.addEventListener('blur',function(){
            span.style.opacity = 0
        })

        function publish(){
            const content = tx.value.trim();
            if(!content)return;
            const newComment = document.createElement('div');
            comments.appendChild(newComment)
            newComment.className = 'comment-item';
            newComment.textContent = content;

            tx.value = '';
            span.style.opacity = 0 ;
        }

        fabuBtn.addEventListener('click',publish);

        tx.addEventListener('keydown',function(e){
            if (e.key === 'Enter' && !e.shiftKey){
                e.preventDefault();
                publish();
            }
        });



    // tx.addEventListener('keydown',function(){
        //     if (e.keyCode === 13) {
        //         publish();
        //     }
        // })

        // function publish(){
        //     const content = tx.value.trim();
        //     if (content === '' || content.length > 200){
        //         alert('请输入1-200字的评论')
        //         return
        //     }
            
        // }

        //每一个函数里面都有this环境对象 普通函数里的this指向的是window
        //function fn(){
        //  console.log(this)
        //}
        // window.fn()
        
    </script>
</body>
</html>    

